<!DOCTYPE html>
<html style="height: 100%;background-color: white;">
  <head>
    <meta charset="utf-8" />
    <title>WebWin组件示例</title>
    <script src="../components/WebWin.js" type="module"></script>
  </head>
  <body marginheight="0px" marginwidth="0px" style="height: 100%">
    <div
      style="
        width: 330px;
        height: 100%;
        background-color: #ffffff;
        display: inline-block;
      "
    >
      <win-inputbox>这里不能查找设置</win-inputbox>
      <win-list-plus id="myList" style="margin-top: 25px;">
        <h5 style="margin: 0;color: #888888;">设置</h5>
        <win-list-item style="margin-top: 8px;" onclick="loadUrlInIframe('item','SettingsList/Home.html')" selected icon='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'
          >主页</win-list-item
        >
        <win-list-item onclick="loadUrlInIframe('item','SettingsList/Tips.html')">Tips</win-list-item>
        <win-list-item
          onclick="loadUrlInIframe('item','SettingsList/About.html')" icon='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>'
          >关于</win-list-item
        >
      </win-list-plus>
    </div>
    <div
      style="
        height: 99%;
        width: calc(100% - 360px);
        vertical-align: top;
        display: inline-block;
      "
      class="iframe-container" id="iframeContainer"
    >
      <iframe
        src="SettingsList/Home.html"
        frameborder="0"
        scrolling="no"
        style="border: none; height: 100%; width: 100%; overflow-x: hidden"
        id="item"
      ></iframe>
    </div>
    <script>
      
      function showAlert1() {
        const buttonGroup = document.createElement("win-dropdown");
        buttonGroup.setAttribute("selectable", ""); // 设置为可选模式

        // 添加按钮
        buttonGroup.addButton("小", "small");
        buttonGroup.addButton("中", "medium", true); // 默认选中
        buttonGroup.addButton("大", "large");

        // 添加到DOM
        document.body.appendChild(buttonGroup);

        // 监听按钮点击事件
        buttonGroup.addEventListener("button-click", (e) => {
          console.log("点击的按钮:", e.detail.text);
          console.log("值:", e.detail.value);

          // 根据值执行不同操作
          switch (e.detail.value) {
            case "small":
              // 小尺寸逻辑
              break;
            case "medium":
              // 中尺寸逻辑
              break;
            case "large":
              // 大尺寸逻辑
              break;
          }
        });

        // 获取当前选中的值
        console.log("当前选中:", buttonGroup.selectedValue);
      }
    </script>
    <script>
      function loadUrlInIframe(iframe, url) {
        // 获取 iframe 元素
        let iframeElement;

        if (typeof iframe === "string") {
          // 如果是字符串，则当作 ID 处理
          iframeElement = document.getElementById(iframe);
          if (!iframeElement) {
            throw new Error(`找不到 ID 为 "${iframe}" 的 iframe 元素`);
          }
        } else if (
          iframe instanceof HTMLElement &&
          iframe.tagName === "IFRAME"
        ) {
          // 如果是 iframe 元素
          iframeElement = iframe;
        } else {
          throw new Error(
            "参数 iframe 必须是 iframe 元素的 ID 或 iframe 元素本身"
          );
        }

        // 检查 URL 是否有效
        if (typeof url !== "string" || !url.trim()) {
          throw new Error("URL 必须是有效的非空字符串");
        }

        // 在 iframe 中加载 URL
        iframeElement.src = url;
      }
    </script>
    <script>
      /*
      document.addEventListener('DOMContentLoaded', () => {
        const list = document.getElementById('myList');
        
        // 监听选择变化事件
        
        
        // 动态添加按钮示例
        setTimeout(() => {
          
          // 批量设置按钮示例，第二个参数是选中的索引
          
        }, 0);
      });
      list.addEventListener('win-list', (e) => {
          console.log('选中项:', e.detail.selectedValue, 
                    '索引:', e.detail.selectedIndex);
        });
      */
    </script>
  </body>
</html>
